<template>
	<div :id="id" class="chart"></div>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			id: this.getID(),
			myChart: null,
		};
	},
	methods: {
		getID() {
			return 'oeeboard-chart1-' + new Date().getTime() + Math.random();
		},
		resize() {
			this.myChart.resize();
		},
	},
	mounted() {
		this.myChart = echarts.init(document.getElementById(this.id));
		const option = {
			title: {
				text: '129%',
				left: 'center',
				top: '40%',
			},
			tooltip: {
				show: false,
			},
			series: [
				{
					type: 'pie',
					color: ['#4f73c2', '#dae2f2'],
					radius: ['60%', '70%'],
					hoverAnimation: false,
					itemStyle: {
						borderRadius: 50,
						borderWidth: 0,
					},
					label: {
						show: true,
						position: 'center',
						normal: {
							show: false,
							position: 'center',
						},
					},
					data: [{ value: 60 }, { value: 40 }],
				},
			],
		};
		this.myChart.setOption(option);
		window.addEventListener('resize', ()=>{
      setTimeout(this.resize, 100);
    });
	},
	destroyed() {
		window.removeEventListener('resize', this.resize);
	},
};
</script>

<style scoped>
.chart {
	width: 100%;
	height: 100%;
}
</style>
